<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/zhuce.css">
</head>
<body>
    <div class="banxin-zhuce">
        <div class="box-zhuce">
          <h1>京京易购欢迎您的注册</h1>
         
            <div class="ban">
              <span class="yi-zhuce"> 
                用户名称：<input name="name" type="text" class="yonghu" placeholder="用户名称">
                <span class="spanspan"></span>
              </span>
              <br>
              <span class="yhma-zhuce"> 
                用户密码：<input name="pwd1" type="password" class="yonghu" placeholder="用户密码">
                <span name="pwdSpan" class="spanspan"></span>
              </span>
              <br>

              <span class="qrma-zhuce"> 
                确认密码：<input name="pwd2" type="password" class="yonghu" placeholder="确认密码">
                <span class="spanspan"></span>
              </span>
              <br>

              <span class="yzm-zhuce"> 
                &nbsp;&nbsp;&nbsp;验证码：<input name="vc" type="password" class="yonghu" placeholder="输入验证码"><a id="sc" style="color:black;margin-left:20px;background-color: #fff;"></a><span name="reset">看不清楚</span><br>
                <span name="vcSpan" class="spanspan"></span>
              </span>
              <br>
              <div class="bt-zhuce">
              <button>点击注册</button>
              </div>
              <div name="msg"></div>
            </div>
          
        </div>
        
      </div>
      <script src="./js/jquery.min.js"></script>
      <script src="./js/myAjax.js"></script>
      <script src="./js/tools.js"></script>
  
      <script>
        // 实现 验证码
  
        // 向标签中写入 验证码 点击 验证码 可以刷新
        $('#sc').html( setVC() ).click(function(){ $(this).html( setVC() ) });
        // 点击 标签 可以刷新验证码
        $('[name="reset"]').click( function(){ $('#sc').html( setVC() ) } );
  
  
        // 给 注册 button 按钮 添加 点击事件
        $('button').click(function(){
          // 获取数据
          // 账号 密码 确认密码 输入的验证码 显示的验证码
          let name = $('[name="name"]').val();
          let pwd1 = $('[name="pwd1"]').val();
          let pwd2 = $('[name="pwd2"]').val();
          let vc1 = $('[name="vc"]').val();
          let vc2 = $('#sc').html();
  
          // 验证判断 如果 验证不通过 输出提示信息 终止之后程序的执行
          if(pwd1 !== pwd2){
            // 密码1 和 密码2 不相等
            // 写入提示信息
            $('[name="pwdSpan"]').html(`</br>您输入的两个密码 不相同`);
            // 执行 return 终止之后的程序
            return ; 
          }else{
            // 清除提示信息
            $('[name="pwdSpan"]').html('');
  
          }
  
          // 不区分大小写 可以 先统一大小写
          if( vc1.toLowerCase() !== vc2.toLowerCase() ){
            // 输入验证码 和 显示验证码不同
            // 写入提示信息
            $('[name="vcSpan"]').html(`</br>您输入的验证码有误`);
            // 重新 刷新 验证码
            $('#sc').html( setVC() );
            // 执行 return 终止之后的程序
            return ; 
          }else{
            // 清除错误提示
            $('[name="vcSpan"]').html('');
          }
  
          // 触发了发送请求 也 要刷新验证码
          $('#sc').html( setVC() );
  
          // 发送ajax请求
          const xhr = myPromiseJQueryAjax( './server/goods_reg.php' , 'post' , { userName:name , userPwd:pwd1 } , 'json' );
          xhr.then(function(res){
            // 注册成功 跳转登录页面
            // 注册失败 弹出一个提示信息
            if( res.result === 0 ){
              window.alert('您的注册失败,账号重复了')
            }else if( res.result === 1 ){
              // 注册成功 5秒后跳转 登录页面
              let time = 5;
              $('[name="msg"]').html(`恭喜您注册成功,${time}秒后跳转登录页面`);
  
              setInterval( function(){
                time--;
  
                if(time === 0){
                  window.location.href = './denglu.html';
                  return;
                }
  
                $('[name="msg"]').html(`恭喜您注册成功,${time}秒后跳转登录页面`);
              } , 1000 )
  
            }
          })
        })
  
      </script>
</body>
</html>